<template>
	<view class="">
		<view class="product">
			<view 
			v-for="(item,index) in productList" 
			@tap ="toproductdetail(index)"
			:key="index" class="productist">
				<image :src="item.pic" mode=""></image>
				<view class="productist_title">
					{{item.title}}
				</view>
				<view class="productist_desc">
					{{item.desc}}
				</view>
				<view class="price">
					￥{{item.price}} <text>{{item.line_price}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: ['productList'],
		data () {
			return {
				
			}
		},
		methods: {
			toproductdetail (index) {
				this.$emit('toproductdetail',index)
			}
		}
	}
</script>

<style lang="less" scoped>
	.product {
		display: flex;
		padding: 0 15upx;
		box-sizing: border-box;
		justify-content: space-between;
		flex-wrap: wrap;
		padding-bottom: 20upx;
		box-sizing: border-box;
	}
	.productist {
		width: 350upx;
		height: 530upx;
		background-color: #FFFFFF;
		border-radius: 10upx;
		margin-top: 20upx;
		padding: 15upx;
		box-sizing: border-box;
		image {
			width: 322upx;
			height: 322upx;
			border-radius: 10upx;
		}
		.productist_title {
			font-size: 24upx;
			color: #333333;
			height: 80upx;
			line-height: 40upx;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			overflow: hidden;
		}
		.productist_desc {
			font-size: 24upx;
			color: #999999;
			line-height: 24upx;
			margin-top: 8upx;
			margin-bottom: 26upx;
		}
		.price {
			font-size: 24upx;
			color: #f73e2f;
			text {
				font-size: 20upx;
				color: #999999;
				text-decoration: line-through;
				margin-left: 10upx;
			}
		}
	}
	
</style>
